<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown渲染测试</title>
    
    <!-- 引入marked库 -->
    <script src="https://cdn.jsdelivr.net/npm/marked@12.0.0/marked.min.js"></script>
    
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: #f5f5f5;
        }
        
        .container {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .test-section {
            margin-bottom: 40px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        
        .test-section h3 {
            margin-top: 0;
            color: #333;
            border-bottom: 2px solid #667eea;
            padding-bottom: 10px;
        }
        
        .message-content {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            border-left: 4px solid #667eea;
        }
        
        /* 直接引用CSS文件中的markdown样式 */
        .message-content h1, 
        .message-content h2, 
        .message-content h3, 
        .message-content h4, 
        .message-content h5, 
        .message-content h6 {
            margin: 0.8em 0 0.4em 0;
            font-weight: 600;
            line-height: 1.3;
            color: #333;
        }

        .message-content h1 { 
            font-size: 1.6em; 
            border-bottom: 2px solid #e9ecef;
            padding-bottom: 0.3em;
        }

        .message-content h2 { 
            font-size: 1.4em; 
        }

        .message-content h3 { 
            font-size: 1.2em; 
        }

        .message-content code {
            background: rgba(102, 126, 234, 0.1);
            padding: 3px 6px;
            border-radius: 4px;
            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
            font-size: 0.9em;
            color: #667eea;
            font-weight: 500;
        }

        .message-content pre {
            background: #2d3748;
            color: #e2e8f0;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 1em;
            margin: 1em 0;
            overflow-x: auto;
            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
            font-size: 0.9em;
            line-height: 1.4;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .message-content pre code {
            background: none;
            padding: 0;
            color: inherit;
            border-radius: 0;
        }

        .message-content ul, 
        .message-content ol {
            margin: 0.8em 0;
            padding-left: 2em;
        }

        .message-content li {
            margin: 0.4em 0;
            line-height: 1.5;
        }

        .message-content blockquote {
            border-left: 4px solid #667eea;
            margin: 1em 0;
            padding: 0.8em 1.2em;
            background: rgba(102, 126, 234, 0.05);
            border-radius: 0 8px 8px 0;
            font-style: italic;
        }

        .message-content table {
            border-collapse: collapse;
            width: 100%;
            margin: 1em 0;
            font-size: 0.9em;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .message-content th, 
        .message-content td {
            border: 1px solid #e9ecef;
            padding: 0.8em 1em;
            text-align: left;
        }

        .message-content th {
            background: #667eea;
            color: white;
            font-weight: 600;
        }

        .test-input {
            width: 100%;
            min-height: 120px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
            font-size: 14px;
            resize: vertical;
        }
        
        .test-button {
            background: #667eea;
            color: white;
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 10px;
        }
        
        .test-button:hover {
            background: #5a6fd8;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎨 HR系统 Markdown 渲染测试</h1>
        
        <!-- 测试基本markdown功能 -->
        <div class="test-section">
            <h3>📝 基本功能测试</h3>
            <div class="message-content" id="basic-test">
                <!-- 这里将显示基本markdown渲染结果 -->
            </div>
        </div>
        
        <!-- 测试代码块和列表 -->
        <div class="test-section">
            <h3>💻 代码和列表测试</h3>
            <div class="message-content" id="code-test">
                <!-- 这里将显示代码和列表渲染结果 -->
            </div>
        </div>
        
        <!-- 测试表格和引用 -->
        <div class="test-section">
            <h3>📊 表格和引用测试</h3>
            <div class="message-content" id="table-test">
                <!-- 这里将显示表格和引用渲染结果 -->
            </div>
        </div>
        
        <!-- 交互式测试区域 -->
        <div class="test-section">
            <h3>🔧 交互式测试</h3>
            <textarea class="test-input" id="markdown-input" placeholder="在此输入markdown内容进行测试...">## 测试标题

这是一个**粗体文本**和*斜体文本*的示例。

### 代码示例
```python
def hello_world():
    print("Hello, World!")
    return "success"
```

### 列表示例
- 项目1
- 项目2
  - 子项目2.1
  - 子项目2.2

### 表格示例
| 姓名 | 技能 | 经验 |
|------|------|------|
| 张三 | Python | 5年 |
| 李四 | JavaScript | 3年 |

> 这是一个引用块的示例。</textarea>
            <br>
            <button class="test-button" onclick="testMarkdown()">🎯 测试渲染</button>
            <div class="message-content" id="interactive-test" style="margin-top: 15px; min-height: 50px;">
                点击上方按钮测试自定义markdown内容
            </div>
        </div>
    </div>

    <script>
        // 配置marked
        marked.setOptions({
            breaks: true,
            gfm: true,
            headerIds: false,
            mangle: false
        });
        
        // 基本功能测试
        const basicMarkdown = `# HR系统功能介绍

## 主要特性
这是**BoLe智能HR系统**的*markdown渲染*测试页面。

### 核心功能
- 候选人智能分析
- 面试题自动生成
- 匹配度评分
- 实时对话交互`;

        document.getElementById('basic-test').innerHTML = marked.parse(basicMarkdown);
        
        // 代码和列表测试
        const codeMarkdown = `## 技术栈示例

### Python后端代码
\`\`\`python
class HRSystem:
    def __init__(self, candidates):
        self.candidates = candidates
    
    def analyze_candidate(self, candidate_id):
        # 分析候选人匹配度
        return {"score": 85, "status": "qualified"}
\`\`\`

### 前端技术
1. **HTML5** - 结构化内容
2. **CSS3** - 样式和动画
3. **JavaScript** - 交互逻辑
4. **Markdown** - 内容渲染

### 核心特性
- ✅ 智能候选人分析
- ✅ 实时对话界面
- ✅ markdown格式支持
- ✅ 响应式设计`;

        document.getElementById('code-test').innerHTML = marked.parse(codeMarkdown);
        
        // 表格和引用测试
        const tableMarkdown = `## 候选人评估表

| 候选人 | 技能匹配度 | 经验年限 | 综合评分 | 状态 |
|--------|------------|----------|----------|------|
| 张三   | 90%        | 5年      | 85分     | 合格 |
| 李四   | 75%        | 3年      | 72分     | 待定 |
| 王五   | 95%        | 7年      | 92分     | 优秀 |

### 系统说明

> **重要提示**：本系统基于AI技术，能够自动分析候选人简历，提供智能化的匹配度评估。
> 
> 所有评估结果仅供参考，最终决策需要结合人工判断。

---

**系统状态**: 🟢 正常运行  
**最后更新**: 2024年11月`;

        document.getElementById('table-test').innerHTML = marked.parse(tableMarkdown);
        
        // 交互式测试函数
        function testMarkdown() {
            const input = document.getElementById('markdown-input').value;
            const output = document.getElementById('interactive-test');
            
            if (input.trim()) {
                try {
                    output.innerHTML = marked.parse(input);
                } catch (error) {
                    output.innerHTML = `<p style="color: red;">渲染错误: ${error.message}</p>`;
                }
            } else {
                output.innerHTML = '<p>请输入markdown内容进行测试</p>';
            }
        }
        
        console.log('📝 Markdown测试页面加载完成');
        console.log('✅ Marked库版本:', marked.VERSION || 'unknown');
    </script>
</body>
</html>



